<template>
  <div>
    <div style="width: 572px; height: 250px" id="line"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { textLine } from './line'
export default {
  props: {
    dayOrder: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      myChart: null,
      isInitChart: false   // 是否需要初始化chart图
    }
  },
  watch: {
    'dayOrder' () {
      this.initLine()
    }
  },
  mounted () {
    this.initLine()
  },
  methods: {
    initLine () {
      if (this.isInitChart) {
        this.myChart.setOption(textLine(this.dayOrder.values, this.dayOrder.order_sum))
      } else {
        if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
          this.myChart.dispose();
        }
        let chartDom = document.getElementById('line')
        this.myChart = echarts.init(chartDom)
        this.myChart.setOption(textLine(this.dayOrder.values, this.dayOrder.order_sum))
        this.isInitChart = true
      }
    }
  }
}
</script>